<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询天气</title>
        <!-- 外部引入方式引入 css 样式文件 -->
        <link rel="stylesheet" href="./index.css" />
</head>
<body>
    请输入城市信息：<input type="text" name="city" id="city"  />
    <button id="query">查询天气</button><br />

    <div id="box" style="display: none; ">结果查询中，请等待....</div>
</body>
</html>

<!-- 引入一个js的第三方库 -->
<script src="./jquery.min.js"></script>


<script>
    //  通过id来获取元素
    // var 声明变量
    var city = document.getElementById('city');
    var query = document.getElementById('query');
    var box = document.getElementById('box');
    
    //给按钮绑定点击事件
    query.onclick = function()
    {
        // 获取输入框内容
        var name = city.value.trim()

        //判断输入框输入的内容是否为空，如果为空就停止
        if(!name)
        {
            // 将盒子在隐藏起来
            box.style.display = 'none'

            alert('请输入城市名称')
            return false  // 程序结束的意思
        }

        // 将盒子显示出来
        box.style.display = 'block'

        // 同时将按钮禁用掉，防止重复点击
        query.setAttribute("disabled", true);


        var weatherUrl = "https://query.asilu.com/weather/baidu/?city=" + encodeURIComponent(name);
        
        $.ajax({
            url: weatherUrl,
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            success: function(data) {
                //说明查询天气情况失败
                if(!data || !data.weather || data.weather.length === 0)
                {
                    alert('查询失败，请检查城市名称是否正确')
                    box.style.display = 'none'
                    query.removeAttribute("disabled")
                    return false
                }

                //将天气结果组装成1句话
                var html = '<h3>' + name + ' 天气信息：</h3>'

                //循环结果
                for(var i = 0; i < Math.min(data.weather.length, 7); i++) {
                    var item = data.weather[i];
                    html += `<div style="margin: 5px 0; padding: 5px; background-color: #f9f9f9; border-radius: 3px;">
                        ${item.date} ${item.temp} ${item.weather} ${item.wind}
                    </div>`
                }

                //将结果放到box盒子里面
                box.innerHTML = html

                //删除属性
                query.removeAttribute("disabled")
            },
            error: function()  //失败的回调函数
            {
                alert('接口请求失败，请稍后重试')
                box.style.display = 'none'
                query.removeAttribute("disabled")
                return false
            }
        })
    }
    
</script>